<style> 
	/* override the root element to enable scrolling */
	#flowpanes {
		position:relative;
		overflow:hidden;
		clear:both;
	}
 
	/* override single pane */
	#flowpanes div {
		float:left;
		display:block;
		width:670px;
		font-size:12px;
	}
 
	/* our additional wrapper element for the items */
	#flowpanes .items {
		width:20000em;
		position:absolute;
		clear:both;
		margin:0;
		padding:0;
	}
 
	#flowpanes .less, #flowpanes .less a {
		color:#999 !important;
		font-size:11px;
	}
	</style> 
	
<ul id="flowtabs" class="navi"> 
	<li><a id="t1" href="#story">Pr&eacute;sentation</a></li> 
	<li><a id="t2" href="#features">La matrice du sahel</a></li> 
	<li><a id="t3" href="#plugins">Actualit&eacute;</a></li> 
	<li><a id="t4" href="#demos">Membres</a></li> 
</ul> 
  
<!-- panes --> 
<div id="flowpanes"> 
 
 
	<!-- wrapper for scrollable items --> 
	<div class="items"> 
 
		<div align="justify"> 
 		 <div style=" width : 150px; " ><img src = "<?php echo $this->baseUrl() ?>/elements/images/carte.jpg"</div>
 		 <h2>la grande muraille verte</h2> 
 		 <p> 
		Face aux d&eacute;fis environnementaux li&eacute;s en grande partie aux changements climatiques et aux effets r&eacute;currents de la d&eacute;sertification, l&rsquo;Afrique et en particulier l&rsquo;Afrique au Sud du Sahara est condamn&eacute;e &agrave; faire front. L&rsquo;initiative<strong>&nbsp;Grande Muraille Verte,&nbsp;</strong>projet transcontinental, initi&eacute; par la CEN-SAD et endoss&eacute; par l&rsquo;Union Africaine&nbsp;<strong>est une r&eacute;ponse de l&rsquo;Afrique.</strong><br/><br/>
		 &nbsp;La Grande Muraille Verte sera une ceinture de v&eacute;g&eacute;tation multi -esp&egrave;ces, large de 15 km reliant Dakar &agrave; Djibouti sur une longueur d&rsquo;environ 7000 km. Au plan op&eacute;rationnel, chaque pays concern&eacute; par la muraille devra d&eacute;limiter une bande foresti&egrave;re large de 15 km, conform&eacute;ment au sch&eacute;ma conceptuel du trac&eacute; de la GMV. Cette bande devra se situer n&eacute;cessairement dans la zone sah&eacute;lienne &agrave; l&rsquo;isohy&egrave;te comprise entre 100 et 400mm.<br /><br />
		&nbsp; La grande muraille sera, autant que possible, une bande continue mais pouvant prendre certains contours pour &eacute;viter des obstacles (cours d&rsquo;eau, sols rocailleux, montagne et collines de roche) ou rejoindre des zones habit&eacute;es.
		</p>
		<br/>
		<br/>
		<br/>
		<a href="index/objectifs"> Voir les objectifs</a>
		</div> 
		
 
		<div style="margin: 10px 0 0 20px; width: 720px;"> 
 
		<a href ="carte"><img alt="" src="<?php echo $this->baseUrl()?>/elements/images/carte.png" width = "720px" /></a>
 				<a href = "matrice"><p> Acc&eacute;dez &agrave; la Matrice et parcourez la muraille</p></a>
		</div> 
 
		<div> 
 
		  	<div style="margin: 10px 0 0 20px; width: 650px;"> 
				<h2>Actualit&eacute; de la bande verte</h2> 
 
				<p> 
					<img alt="" src="<?php echo $this->baseUrl()?>/elements/images/fleche.png"  />&nbsp;&nbsp;<a>Politique : </a> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 					
				</p> 
				<p> 
					<img alt="" src="<?php echo $this->baseUrl()?>/elements/images/fleche.png"  />&nbsp;&nbsp;<a>Economique : </a> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 					
				</p> 
				<p> 
					<img alt="" src="<?php echo $this->baseUrl()?>/elements/images/fleche.png"  />&nbsp;&nbsp;<a>R&eacute;gionale : </a> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 					
				</p> 
 				<p> 
					<img alt="" src="<?php echo $this->baseUrl()?>/elements/images/fleche.png"  />&nbsp;&nbsp;<a>Muraille verte : </a> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 					
				</p> 
				
			</div> 
 
		</div> 
 
		<div class="narrow"> 
 
					<div class="narrow"> 
 
			<div style="margin:0 0 0 50px; width: 500px;"> 
				<h2>Les differents membres de la Grande Muraille verte</h2> 
 
				<ul> 
					
						<li> <a href="#">Membre Silver</a> </li> 
					
						<li> <a href="#">Membre Gold</a> </li> 
					
						<li> <a href="#">Membre Premium</a> </li> 
					
					
				</ul> 
			</div> 
 
		</div> 
 
		</div> 
 
	</div> 
 
</div> 
<script> 
 
 
// wait until document is fully scriptable
$(function() {
 
	// select #flowplanes and make it scrollable. use circular and navigator plugins
	$("#flowpanes").scrollable({ circular: true, mousewheel: true, autoscroll : true }).navigator({
 
		// select #flowtabs to be used as navigator
		navi: "#flowtabs",
 
		// select A tags inside the navigator to work as items (not direct children)
		naviItem: 'a',
 
		// assign "current" class name for the active A tag inside navigator
		activeClass: 'current',
 
		// make browser's back button work
		history: true
 
	}).autoscroll({
		interval: 5000		
	});
});
</script> 

</div>
